<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div>这是第1个div</div>
    <div>这是第2个div</div>
    <div>这是第3个div</div>
    <div>这是第4个div</div>
    <div>这是第5个div</div>

    <script>
        (function(window, undefined) {
            var jQuery = function(selector) {
                return new jQuery.fn.init(selector);
            };

            // 原型替换
            jQuery.fn = jQuery.prototype = {
                constructor: jQuery,

                init: function(selector) {
                    var elements = document.querySelectorAll(selector);
                    [].push.apply(this, elements);
                },
                css: function(name, value) {

                    if (arguments.length === 2) {

                        for (var i = 0; i < this.length; i++) {
                            // console.log(this[i]);
                            this[i].style[name] = value; // [变量]
                        }
                    } else if (arguments.length === 1) {

                        if (typeof name === "object") {

                            for (var i = 0; i < this.length; i++) {

                                for (var k in name) {

                                    this[i].style[k] = name[k];
                                }
                            }
                        } else if (typeof name === "string") {

                            return window.getComputedStyle(this[0], null)[name];
                        }
                    }

                    // 实现了链式编程
                    return this;
                },
                addClass: function(name) {
                    // console.log("addClass id ok");

                    for (var i = 0; i < this.length; i++) {
                        this[i].classList.add(name);
                    }
                    return this;
                },
                removeClass: function(name) {
                    // console.log("removeClass id ok");
                    for (var i = 0; i < this.length; i++) {
                        this[i].classList.remove(name);
                    }
                    return this;
                },
                hasClass: function(name) {
                    // console.log("hasClass id ok");
                    for (var i = 0; i < this.length; i++) {
                        if (this[i].classList.contains(name)) {
                            // if成立，说明有这个类名
                            return true;
                        }
                    }
                    return false;
                },
                toggleClass: function(name) {
                    // console.log("toggleClass id ok");
                    for (var i = 0; i < this.length; i++) {
                        if (this[i].classList.contains(name)) {
                            this[i].classList.remove(name);
                        } else {
                            this[i].classList.add(name);
                        }
                    }
                    return this;
                },
            };

            jQuery.fn.init.prototype = jQuery.fn;

            window.jQuery = window.$ = jQuery;
        })(window);

        var $divs = $("div");
        // console.log($divs);

        // $divs.addClass();
        // $divs.removeClass();
        // $divs.hasClass();

        $divs.addClass("aaa").addClass("bbb").addClass("ccc");
        $divs.removeClass("bbb");
        console.log($divs.hasClass("aaa"));
    </script>
</body>

</html>